<template>
  <div ref="join" class="content2">
    <div class="title display-flex align-items-center justify-content-center">
      <h2 class="display-flex align-items-center justify-content-center">
        <img class="serverIcon" src="../../../assets/join.png" alt>
        <span>加入我们</span>
        <span>/</span>
      </h2>
      <p>寻找精英</p>
    </div>
    <div class="welcome display-flex align-items-center justify-content-center">
      <img src="../../../assets/text.png" alt="">
    </div>
    <div class="jobsOuter display-flex align-items-center justify-content-space-between">
      <div class="jobItem display-flex flex-direction-column align-items-center">
        <img class="icon" src="../../../assets/java.png" alt="">
        <span class="name">JAVA工程师</span>
        <span class="salary">薪资：4-10K</span>
        <span class="more">了解详情</span>
      </div>
      <div class="jobItem display-flex flex-direction-column align-items-center">
        <img class="icon" src="../../../assets/java1.png" alt="">
        <span class="name">JAVA高级工程师</span>
        <span class="salary">薪资：4-10K</span>
        <span class="more">了解详情</span>
      </div>
      <div class="jobItem display-flex flex-direction-column align-items-center">
        <img class="icon" src="../../../assets/web.png" alt="">
        <span class="name">前端工程师</span>
        <span class="salary">薪资：4-10K</span>
        <span class="more">了解详情</span>
      </div>
      <div class="jobItem display-flex flex-direction-column align-items-center">
        <img class="icon" src="../../../assets/ui.png" alt="">
        <span class="name">ui设计师</span>
        <span class="salary">薪资：4-10K</span>
        <span class="more">了解详情</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name:'Join',
  mounted:function(){
    this.$store.commit('setJoin',this.$refs['join'])
  }
};
</script>
<style scoped>
.content2 {
  width: 100%;
  height: 11.8rem;
  padding-top: 0.3rem;
  color: #fff;
  background-image: url("../../../assets/join_bg.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.title {
  font-size: 0.33rem;
  opacity: 0.8;
}
.title>p{
  position: relative;
  top: 0.07rem;
}
.title > h2 > img {
  width: 0.6rem;
}
.welcome{
  margin-top: 1.5rem;
}
.welcome>img{
  width: 10rem;
}
.jobsOuter{
  padding: 0 3rem;
  margin-top: 1.5rem;
}
.icon{
  width: 2rem;
}
.name{
  font-size: 0.3rem;
  margin-top: 0.3rem;
}
.salary{
  font-size: 0.3rem;
  margin-top: 0.2rem;
}
.more{
  font-size: 0.25rem;
  margin-top: 0.3rem;
  border: 1px solid #fff;
  padding: 0.1rem 0.3rem;
}
.more:hover{
  font-size: 0.25rem;
  margin-top: 0.3rem;
  border: 1px solid #fff;
  padding: 0.1rem 0.3rem;
  background: #fff;
  color: #000;
  cursor: pointer;
}
</style>
